<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 500px;
            margin: 0 auto;
        }

        canvas {
            border: 1px solid black;
            display: block;
            margin: 100px auto;
            /* background-image: url(./images/u=3881593557\,1312730616&fm=253&fmt=auto&app=138&f=JPEG.webp); */
            /* background-size: 100%; */
        }

        #btn {
            width: 300px;
            height: 200px;
            background-color: aqua;
            font-size: 50px;
        }
    </style>
</head>

<body>
    <canvas width="500px" height="500px"></canvas>
    <button id="btn">变身</button>
</body>
<script>
    var convas = document.querySelector("canvas")
    var paint = convas.getContext("2d");
    // paint.fillStyle = "black"
    // paint.fillRect(0, 0, 100, 100);
    convas.onmousedown = function (e) {
        // paint.beginPath();
        x = e.pageX - convas.offsetLeft;
        y = e.pageY - convas.offsetTop;
        console.log(`${x},${y}`)
    }
    // paint.beginPath();
    // var radialGrad = paint.createRadialGradient(241, 121, 0, 300, 300, 300);
    // radialGrad.addColorStop(0.0, '#fff');
    // radialGrad.addColorStop(0.25, '#FB3');
    // radialGrad.addColorStop(0.5, '#690');
    // radialGrad.addColorStop(0.75, '#09C');
    // radialGrad.addColorStop(1.0, '#000');
    // paint.fillStyle = radialGrad;
    // paint.fillRect(0, 0, 600, 600);
    //-----------------------()()()()
    var num = 500;
    var num1 = 500;
    btn.onclick = function () {
        setInterval(function () {
            num--
            radialGrad = paint.createRadialGradient(243, 180, num, 300, 300, num1);
            radialGrad.addColorStop(0.0, '#fff');
            radialGrad.addColorStop(0.25, '#FB3');
            radialGrad.addColorStop(0.5, '#690');
            radialGrad.addColorStop(0.75, '#09C');
            radialGrad.addColorStop(1.0, '#000');
            paint.fillStyle = radialGrad;
            paint.fillRect(0, 0, 600, 600);
            console.log(num)
            if (num <= 200) {
                num1--
                num = 200;
                console.log(num1)
                if (num1 == 0) {
                    num = 200;
                    num1 = 500;
                }
            }
            draw();
            // paint.globalCompositeOperation = "destination-in"
        }, 10)
    }
    draw();
    //-------------------------()()()()
    function draw() {
        paint.beginPath();
        paint.strokeStyle = "black";
        paint.lineWidth = "6";
        paint.moveTo(158, 115);
        // paint.lineTo(136, 168);
        paint.quadraticCurveTo(139, 140, 136, 168);
        paint.stroke();
        paint.closePath();
        //--------------------
        paint.beginPath();
        paint.strokeStyle = "black";
        paint.lineCap = "round"
        paint.moveTo(137, 168);
        paint.bezierCurveTo(60, 190, 40, 380, 360, 275);
        // paint.quadraticCurveTo(-30, 350, 360, 275);
        paint.stroke();
        paint.closePath();
        //--------------------
        paint.beginPath();
        paint.strokeStyle = "black";
        paint.moveTo(360, 275);
        paint.bezierCurveTo(444, 320, 434, 178, 380, 206);
        paint.stroke();
        paint.closePath();
        //--------------------
        paint.beginPath();
        paint.fillStyle = "black";
        paint.moveTo(381, 206);
        paint.quadraticCurveTo(376, 216, 360, 218);
        paint.quadraticCurveTo(356, 160, 336, 107);
        paint.quadraticCurveTo(330, 128, 310, 110);
        paint.bezierCurveTo(290, 80, 286, 126, 264, 114);
        paint.quadraticCurveTo(256, 106, 266, 96);
        paint.lineTo(220, 95)
        paint.quadraticCurveTo(230, 114, 218, 117);
        paint.quadraticCurveTo(212, 124, 191, 103);
        paint.bezierCurveTo(183, 92, 177, 120, 157, 119);
        paint.bezierCurveTo(140, 113, 168, 78, 195, 71);
        paint.quadraticCurveTo(202, 71, 208, 78);
        paint.quadraticCurveTo(241, 63, 294, 73);
        paint.quadraticCurveTo(318, 63, 331, 90);
        paint.quadraticCurveTo(375, 115, 384, 202);
        paint.fill();
        paint.closePath();
        //--------------------
        paint.beginPath();
        paint.strokeStyle = "black";
        paint.lineWidth = "10"
        paint.lineCap = "round"
        paint.moveTo(153, 166);
        paint.quadraticCurveTo(180, 117, 225, 160);
        paint.stroke();
        paint.closePath();
        //--------------------
        paint.beginPath();
        paint.strokeStyle = "black";
        paint.lineWidth = "10"
        paint.lineCap = "round"
        paint.moveTo(268, 156);

        paint.quadraticCurveTo(300, 115, 339, 151);
        paint.stroke();
        paint.closePath();
        //--------------------
        paint.beginPath();
        paint.arc(195, 184, 26, 0, 360 / 180 * Math.PI);
        paint.fillStyle = "black";
        paint.fill();
        paint.closePath();
        //--------------------
        paint.beginPath();
        paint.fillStyle = "black";
        paint.moveTo(186, 161);
        paint.bezierCurveTo(158, 163, 150, 220, 200, 210);
        paint.fill();
        paint.closePath();
        //--------------------
        paint.beginPath();
        paint.fillStyle = "white";
        paint.arc(188, 186, 7, 0, 360 / 180 * Math.PI);
        paint.fill();
        paint.closePath();
        //--------------------
        paint.beginPath();
        paint.fillStyle = "black";
        paint.moveTo(300, 157);
        paint.bezierCurveTo(250, 158, 254, 217, 302, 211);
        paint.bezierCurveTo(332, 212, 348, 168, 300, 157);
        paint.fill();
        paint.closePath();
        //--------------------
        paint.beginPath();
        paint.fillStyle = "white";
        paint.arc(300, 185, 7, 0, 360 / 180 * Math.PI);
        paint.fill();
        paint.closePath();
        //--------------------
        paint.beginPath();
        paint.sstrokeStyle = "black";
        paint.lineWidth = "6"
        paint.moveTo(360, 276);
        paint.quadraticCurveTo(380, 293, 365, 400);
        paint.lineTo(347, 405);
        // paint.lineTo(318, 319);
        paint.quadraticCurveTo(328, 362, 318, 319);
        paint.stroke()
        paint.closePath();
        //--------------------
        paint.beginPath();
        paint.sstrokeStyle = "black";
        paint.lineWidth = "5";
        paint.lineJoin = "round"
        paint.moveTo(363, 402);
        paint.lineTo(365, 412);
        paint.quadraticCurveTo(376, 410, 375, 428);
        paint.quadraticCurveTo(365, 446, 349, 438);
        paint.quadraticCurveTo(343, 436, 347, 427);
        paint.bezierCurveTo(333, 421, 346, 412, 352, 412);
        paint.lineTo(352, 404);
        paint.stroke()
        paint.closePath();
        //--------------------
        paint.beginPath();
        paint.lineWidth = "7"
        paint.moveTo(349, 422);
        paint.quadraticCurveTo(353, 422, 354, 431);
        paint.lineCap = "round";
        paint.stroke()
        paint.closePath();
        //--------------------
        paint.beginPath();
        paint.lineWidth = "6"
        paint.strokeStyle = "black"
        paint.moveTo(341, 435);
        paint.lineCap = "round";
        paint.bezierCurveTo(285, 443, 257, 425, 146, 438);
        paint.stroke()
        paint.closePath();
        //--------------------
        paint.beginPath();
        paint.lineWidth = "4"
        paint.strokeStyle = "black"
        paint.moveTo(143, 436);
        paint.lineCap = "round";
        paint.quadraticCurveTo(141, 375, 153, 330);
        paint.stroke()
        paint.closePath();
        //--------------------
        paint.beginPath();
        paint.lineWidth = "5"
        paint.strokeStyle = "black"
        paint.moveTo(142, 301);
        paint.lineCap = "round";
        paint.quadraticCurveTo(122, 363, 122, 396);
        paint.lineTo(140, 401)
        paint.stroke()
        paint.closePath();
        //--------------------
        paint.beginPath();
        paint.lineWidth = "5"
        paint.strokeStyle = "black"
        paint.moveTo(135, 402);
        paint.lineTo(132, 413)
        paint.lineCap = "round";
        paint.quadraticCurveTo(118, 410, 116, 423);
        // paint.quadraticCurveTo(114, 446, 142, 431);
        paint.bezierCurveTo(116, 440, 132, 443, 142, 431);
        // paint.lineTo(140, 401)
        paint.stroke()
        paint.closePath();
        //--------------------
        paint.beginPath();
        paint.lineWidth = "5"
        paint.lineCap = "round";
        paint.moveTo(143, 423);
        paint.quadraticCurveTo(131, 418, 128, 427);
        paint.strokeStyle = "black"
        paint.stroke()
        paint.closePath();
        //--------------------
        paint.beginPath();

        paint.arc(163, 286, 4, 0, 360 / 180 * Math.PI);
        paint.fillStyle = "black"
        paint.fill()
        paint.closePath();
    }
</script>

</html>